<template>
  <div class="cart">
    <template v-if="goods.length == 0">
      <van-divider>购物车暂无数据，赶快去选购~</van-divider>

      <div style="text-align: center;margin-top: 25px;">
        <van-button type="danger" @click="goUrl('/index');">去购物</van-button>
      </div>

    </template>
    <template v-if="goods.length>0">
      <van-checkbox-group class="card-goods" v-model="checkedGoods">
        <van-checkbox
          class="card-goods__item"
          v-for="item in goods"
          :key="item.id"
          :name="item.id"
        >
          <van-card
            :title="item.title"
            :desc="item.desc"
            :num="item.num"
            :price="formatPrice(item.price)"
            :thumb="item.thumb">
            <div slot="footer">
              <van-button @click.stop="delCart(item)" size="mini">删除</van-button>
            </div>
          </van-card>
        </van-checkbox>
      </van-checkbox-group>
      <van-submit-bar
        :price="totalPrice"
        :disabled="!checkedGoods.length"
        :button-text="submitBarText"
        @submit="onSubmit"
      />
    </template>

  </div>
</template>

<script>
  import cartService from '../../api/cartService';
  import Api from '../../api/api';
  import util from '../../../../../static/mobile/js/util';
  import { Checkbox, CheckboxGroup, Card, SubmitBar, Toast } from 'vant';
  export default {
    components: {
      [Card.name]: Card,
      [Checkbox.name]: Checkbox,
      [SubmitBar.name]: SubmitBar,
      [CheckboxGroup.name]: CheckboxGroup
    },
    data() {
      return {
        downloadUrl:Api.download,
        checkedGoods: [],
        goods: []
      };
    },
    computed: {
      submitBarText() {
        const count = this.checkedGoods.length;
        return '结算' + (count ? `(${count})` : '');
      },
      totalPrice() {
        return this.goods.reduce((total, item) => total + (this.checkedGoods.indexOf(item.id) !== -1 ? util.mul(item.price,item.num) : 0), 0);
      }
    },
    methods: {
      goUrl(url) {
        this.$nocacheRouter(url);
      },
      delCart(item) {
        var para = {
          goodsId:item.cart.goods.id,
          color:item.cart.color,
          size:item.cart.size
        };
        cartService.delCart(para).then((rsp)=>{
          if(rsp.result) {
            this._getCartList();
          }else {
            this.$toast(rsp.errorMsg);
          }
      }).catch((error)=>{
          this.$toast('delCart接口异常'+error);
      });
      },
      _getCartList(){
        cartService.getCartList().then((rsp)=>{
          if(rsp.result) {
            this.goods = [];
            this.checkedGoods = [];
            let cartList = rsp.obj;
            if(cartList.length>0){
              for(let i=0;i<cartList.length;i++) {
                let cart = cartList[i];
                let key = cart.goods.id+'_'+cart.color+'_'+cart.size;
                let good = {
                  cart:cart,
                  id:key,
                  title:cart.goods.title,
                  desc:cart.color+'/'+cart.size+'码',
                  price:cart.colorSizeItem.price*100,
                  num:cart.num,
                  thumb:this.downloadUrl+'?fileName='+cart.pic
                };
                this.goods.push(good);
                this.checkedGoods.push(key);
              }
            }

          }else {
            this.$toast(rsp.errorMsg);
          }
      }).catch((error)=>{
          this.$toast('getCartList接口异常'+error);
      });
      },
      formatPrice(price) {
        return (price / 100).toFixed(2);
      },
      onSubmit() {
        let keys = this.checkedGoods.join(',');
        this.$nocacheRouter('/payCart?keys='+keys);
      },

    },
    mounted(){
      this._getCartList();
    }
  };
</script>

<style>
  .card-goods {
    padding: 10px 0;
    background-color: #fff;
  }
  .card-goods__item {
     position: relative;
     background-color: #fafafa;
  }
 .cart .van-checkbox__label {
    width: 100%;
    height: auto;
    padding: 0 10px 0 15px;
    box-sizing: border-box;
  }
</style>
